import React, { useState } from 'react';
import { Dialog, Toast } from 'antd-mobile';
import styles from './index.module.scss';
import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
import { useDispatch } from 'react-redux';
import {
  setArticleDislikeActionCreator,
  setArticleMarkActionCreator,
  setArticleReportActionCreator,
} from '@/store/action/article';

export default function ArticleMark() {
  const dispatch = useDispatch();
  const { activeId } = useAppSelector((state) => state.channel);
  const { mark } = useAppSelector((state) => state.articleList);
  // console.log(12, mark);

  const [type, setType] = useState<'junk' | ''>('');

  // 举报反馈菜单
  const reports = [
    { type: '0', title: '其他问题' },
    { type: '1', title: '标题夸张' },
    { type: '2', title: '低俗色情' },
    { type: '3', title: '错别字多' },
    { type: '4', title: '旧闻重复' },
    { type: '5', title: '广告软文' },
    { type: '6', title: '内容不适' },
    { type: '7', title: '涉嫌违法犯罪' },
    { type: '8', title: '侵权' },
  ];

  // 点击了不感兴趣
  const handleDislike = () => {
    dispatch(setArticleDislikeActionCreator(mark.article_id));
    // 提示用户
    Toast.show('操作成功');
    // 关闭弹窗
    handleClose();
  };

  //点击文章举报
  const handleReport = (type: string) => {
    // 调用action
    dispatch(
      setArticleReportActionCreator({
        target: mark.article_id,
        type: type,
        remark: '',
        activeId: activeId,
      })
    );
    // 提示用户
    Toast.show({
      content: '举报成功',
      duration: 1000,
    });
    // 关闭弹窗
    handleClose();
  };

  // 关闭对话框
  const handleClose = () => {
    dispatch(setArticleMarkActionCreator({ visible: false }));
  };
  return (
    <Dialog
      bodyClassName={styles.root}
      visible={mark.visible}
      onClose={handleClose}
      closeOnMaskClick
      content={
        <div className="more-action">
          {/* 默认菜单内容 */}
          <div hidden={type === 'junk'}>
            <div className="action-item" onClick={handleDislike}>
              <Icon type="iconicon_unenjoy1" /> 不感兴趣
            </div>
            <div className="action-item" onClick={() => setType('junk')}>
              <Icon type="iconicon_feedback1" />
              <span className="text">反馈垃圾内容</span>
              <Icon type="iconbtn_right" />
            </div>
            <div className="action-item">
              <Icon type="iconicon_blacklist" /> 拉黑作者
            </div>
          </div>

          {/* 反馈垃圾内容 */}
          <div hidden={type !== 'junk'}>
            <div className="action-item" onClick={() => setType('')}>
              <Icon type="iconfanhui" />
              <span className="back-text">返回</span>
            </div>
            {reports.map((item) => (
              <div
                key={item.type}
                className="action-item"
                onClick={() => handleReport(item.type)}
              >
                {item.title}
              </div>
            ))}
          </div>
        </div>
      }
    />
  );
}
